import styles from './index.module.less'

export  const Button = (props) => {
    console.log('Button', props)
    const { 
        width,
        height,
        children, 
        fontSize, 
        textAlign,
        fontWeight, 
        textIndent, 
        backgroundColor,
        borderRadius,
        paddingHorizontal,
        paddingVertical,
        ...style 
    } = props;

    const paddingHorizontalStyle = {
        paddingLeft: paddingHorizontal,
        paddingRight: paddingHorizontal
    }
    const paddingVerticalStyle = {
        paddingTop: paddingVertical,
        paddingBottom: paddingVertical
    }
    
   
    return <div style={{ width: width + 'px', height: height + 'px', ...paddingHorizontalStyle, ...paddingVerticalStyle  }}>
        <div className={styles.button} style={{ width: '100%', height: '100%', textAlign, textIndent: textIndent + 'px', backgroundColor, borderRadius }}>
            <span style={{ ...style,  fontSize: fontSize + 'px', fontWeight: fontWeight && 'bold' }}>{children}</span>
        </div>
    </div>
}